<template>
  <div class="department-container">
    <div class="app-container">
      <el-dcar>
        <!-- 用一个行列布局 -->
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          style="height: 40px"
        >
          <el-col :span="20">
            <svg-icon icon-class="news" /><span
              >江苏传智播客教育科技股份有限公司</span
            >
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <!-- 两个内容 -->
              <el-col>负责人</el-col>
              <!-- 下拉菜单 element -->
              <el-col>
                <el-dropdown>
                  <span> 操作<i class="el-icon-arrow-down" /> </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>添加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <!-- 属性的组件el-tree搭建属性的结构的数据 -->
        <!-- el-tree
          default-expand-all 是否展开所有的子节点
        -->
        <el-tree default-expand-all :data="list">
          <!-- 使用作用域插槽获取组件内部的数据
           el-tree提供的默认的作用域插槽 #default="{data}" 获取el-tree组件内部的数据
          -->

          <template #default="{ data }">
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              style="height: 40px; width: 100%"
            >
              <el-col :span="20">
                <svg-icon icon-class="news" /><span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>{{ data.manager }}</el-col>
                  <!-- 下拉菜单 element -->
                  <el-col>
                    <el-dropdown>
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="hEdit(data.id)"
                          >添加子部门</el-dropdown-item
                        >
                        <el-dropdown-item @click.native="hAdd(data.id)"
                          >编辑部门</el-dropdown-item
                        >
                        <el-dropdown-item v-if="data.children.length===0" @click.native="hDel(data.id)"
                          >删除部门</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-dcar>
      <!-- 增加弹层 -->

      <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :title="isEdit ? '编辑部门' : '新增加部门'"
        :visible.sync="showDialog"
        width="50%"
        @closed="hClose"
      >
        <!-- 父亲穿子重新渲染数据 -->
        <addOrEdit
          v-if="showDialog"
          ref="deptRef"   
          :id="curId"
          :is-edit="isEdit"
          :origin-list="originList"
           @success="hSuccess"
          @close="showDialog=false"
        />

        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="showDialog = false">取 消</el-button>
          <el-button type="primary" @click="showDialog = false"
            >确 定</el-button
          > -->
        <!-- </span> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getDepartments ,delDepartments} from "@/api/departments";
import { transDataToTreeData } from "@/utils";

import { addOrEdit } from "./deptDialog.vue";

export default {
  components: {
    addOrEdit,
  },
  data() {
    return {
      this: [], //存储部门列表
      showDialog: false, //控制弹层的显示和隐藏
      curId: "", //当前部门id,作为子部门的父级id
      isEdit: false, //false 新增||trune 编辑
      originList:[] //保存传给子组件部门列表
    };
  },
  created() {
    this.loadDepartments();
  },

  methods: {
   hClose(){
console.log('弹层关闭....');
this.$refs.deptRef.resetForm()
   },
    async loadDepartments() {
      try {
        const res = await getDepartments();
        if (res.code !== 10000) return this.$message.error(res.message);
        this.originList=res.data.depts.map(item=>{
          const {id,code,name,pod}=item
          return {id,code,name,pod}
        })
        this.$message.success(res.message);
        res.data.depts.shift(); // 删除第一条数据,公司的名称
        // res.data.depts 平铺数据---->使用transDataToTreeData转化成树形数据
        this.list = transDataToTreeData(res.data.depts);
      } catch (error) {
        console.log(error);
        // this.$message.error('获取数据失败')
      }
    },
    //删除功能
    hDel(id) {
      this.$confirm("确定删除吗,是不是继续", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type:'warning'
      }).thne(async()=>{
        const res=await delDepartments(id)
        if(res.code===10000){
          this.$message.success(res.message)
          this.loadDepartments()
        }
      }).catch(()=>{
        this.$message({
          type:'info',
          message:'已经删除'
        })
      })
    },
    hEdit(id) {
      this.curId = id;
      this.isEdit = true; //编辑状态
      this.showDialog = true;
      // this.$nextTick(()=>{
      //   this.$refs.deptRef.loadDepartmentsDetail()
    },
    hAdd(id) {
      this.curId = id;
      this.isEdit = true; //编辑状态
      this.showDialog = true;
    },
    hSuccess() {
      //重新渲染列表数据,关闭弹层
      this.loadDepartments();
      this.showDialog = false;
    },
    hAdd(id) {
      console.log(id);
      this.curId = id;
      this.showDialog = true;
    },

    
  },
};
</script>
